<!-- 最近阅读 -->
<script setup lang="ts">
import { getBookInfo } from '@/api/getAxios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const $router = useRouter()
const book = ref(localStorage.getItem("readBook"))
const data = ref()
const index = ref(0)
if (localStorage.getItem("readBook") != null) {
    let speed = JSON.parse(<any>localStorage.getItem("speed"))
    index.value = speed[speed.findIndex((val: any) => val.id == book.value)].target
    getBookInfo(<any>book.value).then((res) => {
        data.value = res.data.data
    })
}
</script>
<template>
    <div class="main">
        <h1 v-if="data">👀 最近阅读</h1>
        <div v-if="data">
            <p @click="$router.push({ path: '/BookInfo', query: { storyId: data.id } })">
                <img :src="data.cover" alt="">
            </p>
            <div>
                <p>{{ data.name }}</p>
                <p>{{ data.authorName }}</p>
                <p>最新章节：{{ data.latestChapter }}</p>
                <button @click="$router.push({ path: '/reading', query: { id: data.id, target: index } })">
                    阅读至 第{{ Number(index) + 1 }}章
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.main {
    margin: 26px 0;

    h1 {
        font-size: 1.2rem;
    }

    >div {
        margin-top: 40px;
        display: flex;
        background-color: white;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 0 16px 0 gainsboro;

        >p:nth-child(1) {
            width: 30%;
            min-width: 30%;
            margin-right: 18px;
            margin-top: -30px;
        }
        >div{
            width: 210px;
        }
        p {
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
        }

        img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 0 10px 0px gray;

            &:active {
                opacity: 0.8;
            }
        }

        >div {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;

            p:nth-child(1) {
                font-size: 1.1rem;
                margin-bottom: 6px;
            }

            p:nth-child(2),
            p:nth-child(3) {
                font-size: .9rem;
                color: #4b4b4b;
            }
        }
    }

    button {
        background-color: var(--mcolor);
        color: whitesmoke;
        border: 0;
        border-radius: 6px;
        padding: 6px 10px;
        margin-top: 10px;
        box-shadow: 0 0 10px 2px gainsboro;
        transition: all 0.2s;
        font-size: .9rem;

        &:active {
            opacity: 0.8;
        }
    }
}
</style>